<template>
  <div class="home">
    <div class="top">
      <span>Using attributes</span>
      <el-input
        v-model="input1"
        style="width: 240px"
        placeholder="Pick a date"
        :suffix-icon="Calendar"
        class="input1"
      />
      <el-input
        v-model="input2"
        style="width: 240px"
        placeholder="Type something"
        :prefix-icon="Search"
      />
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="staffName" label="员工名称" width="180" />
      <el-table-column prop="state" label="是否请假" width="180" />
      <el-table-column prop="position" label="职位信息" />
      <el-table-column prop="reserved" label="操作按钮">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleClick(row)">
            删除数据
          </el-button>
          <el-button link type="primary" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { gestaffList, deleteStaff } from '@/api/staffapi'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref()

//查询所有数据并在加载时显示
const getRoom = async () => {
  const res = await gestaffList()
  tableData.value = res.data.data
  console.log(res.data.data)
}

//删除数据
const handleClick = (row) => {
  ElMessageBox.confirm('是否删除?', '确认删除')
    .then(async () => {
      const res = await deleteStaff(row.id)
      if (res.data.code == 200) {
        ElMessage.success('删除成功')
      } else {
        ElMessage.error('删除失败')
      }
      getRoom()
    })
    .catch()
}
getRoom()
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  height: 100%;
  background: white;

  .top {
    span {
      margin-right: 20px;
    }

    .input1 {
      margin-right: 20px;
    }
  }
}
</style>
